<template>
  <div class="pay-count">
    <div class="dates flex jcb">
      <div class="start-time time" @click="showPop('startTime')">{{startTime}}</div>
      <div class="split">-</div>
      <div class="end-time time" @click="showPop('endTime')">{{endTime}}</div>
    </div>
    <div class="list">
      <van-cell :title="item.label" :value="info[item.prop]" size="large" v-for="(item, ind) in labels" :key="ind">
        <span class="wsnw" slot="title">{{item.label}}</span>
      </van-cell>
    </div>

    <div class="popup pof zi10 w100 h100 l0 t0" @click="curr = ''" v-show="curr">
      <div class="inner poa b0 w100" @click.prevent.stop>
        <van-datetime-picker v-model="currentDate"
                             v-if="curr"
                             type="datetime"
                             :visible-item-count="3"
                             @confirm="confirm"
                             :title="popTitle"/>
      </div>
    </div>
  </div>
</template>

<script>
  import { Base64 } from '@/utils/base64';

  export default {
    name: 'PayCount',
    data() {
      return {
        startTime: '开始时间',
        endTime: '结束时间',
        popTitle: '',
        currentDate: new Date(),
        info: {},
        curr: '',
        labels: [
          { label: '扫码点击', prop: 'code_count' },
          { label: 'h5链接点击', prop: 'h_count' },
          { label: '扫码调起订单数', prop: 'code_order_count' },
          { label: 'h5调起订单数', prop: 'h_order_count' },
          { label: '扫码支付年卡订单数', prop: 'code_one_pay_count' },
          { label: 'h5链接支付年卡订单数', prop: 'h_one_pay_count' },
          { label: '扫码支付三年卡订单数', prop: 'code_three_pay_count' },
          { label: 'h5链接支付三年卡订单数', prop: 'h_three_pay_count' }
        ]
      };
    },
    created() {
      let arr = this.util.typeToDate(0);
      this.startTime = this.util.formatTime(arr[0], 'Y-MM-DD HH:mm');
      this.endTime = this.util.formatTime(arr[1], 'Y-MM-DD HH:mm');
      this.getList();
    },
    methods: {
      showPop(val) {
        if (val === 'startTime') {
          this.popTitle = '开始时间';
        } else if (val === 'endTime') {
          this.popTitle = '结束时间';
        }
        this.currentDate = new Date(this[val]);
        this.curr = val;
      },
      confirm(val) {
        this[this.curr] = this.util.formatTime(val, 'Y-MM-DD HH:mm');
        this.curr = '';
        this.getList();
      },
      getList() {
        let { startTime: start_time, endTime: end_time } = this;
        let ids = this.$route.query.ids || '';
        let [product_id, channel_id, title] = ids.split('_');
        title && (document.title = title);
        if (start_time.length === 4) {
          start_time = '';
        } else {
          start_time = new Date(start_time) / 1000 | 0;
        }
        if (end_time.length === 4) {
          end_time = '';
        } else {
          end_time = new Date(end_time) / 1000 | 0;
        }

        this.http.$post('api/user/pay_click_count', {
          product_id,
          channel_id,
          start_time,
          end_time
        }).then(res => {
          this.info = res;
        }).catch(this.$err);
      }
    }
  };
</script>

<style scoped lang="less">
  .dates {
    padding: 10px;
    align-items: center;
    background-color: #fff;
    font-size: 18px;
    line-height: 1;
    color: #333;
    border-bottom: 1px solid #ddd;
    .time {
      padding: 10px;
      width: 43%;
      background-color: #e8e8e8;
      border-radius: 50px;
      text-align: center;
    }
  }

  .popup {
    background-color: rgba(0, 0, 0, .3);
    .inner {
      background-color: #fff;
    }
  }
</style>
